<template>
  <div id="sendMessage">
    <div class="messageSwdy">
      发行信息
      <el-button size="small" type="warning" @click="dialogBj = true" v-if="dataShow">+ 编辑</el-button>
      <el-button size="small" type="warning" @click="dialogxinzeng = true" v-else>+ 添加</el-button>
    </div>
    <div class="content" v-if="dataShow">
      <div class="box">
        <div>
          <span>实际发行金额：</span>
          <span>¥{{data.actualIssueAmount}}</span>
          <span>是否储架：</span>
          <span>{{data.isShelf==1? '是': '否'}}</span>
        </div>
        <div>
          <span>计划发行金额：</span>
          <span>¥{{data.plannedIssueAmount}}</span>
          <span>专项计划存续期限：</span>
          <span>{{data.duration}}</span>
        </div>
        <div>
          <span>实际发行利率：</span>
          <span>{{data.issueRate}}</span>
          <span>是否有循环购买：</span>
          <span>{{data.isCyclePurchase==1? '是': '否'}}</span>
        </div>
        <div>
          <span>期限：</span>
          <span>{{data.term}}</span>
          <span>投资信息评级：</span>
          <span>{{data.investmentRating}}</span>
        </div>
      </div>
    </div>
    <!-- -------------------添加-------------------------- -->
    <el-dialog title="发行信息" :visible.sync="dialogxinzeng" width="708px" center>
      <el-row class="swelrow">
        <el-col :span="6" class="left">
          <span>*</span> 实际发行金额：
        </el-col>
        <el-col :span="16">
          <el-input size="small" placeholder="请输入金额" v-model="adddia.actualIssueAmount"></el-input>
        </el-col>
      </el-row>
      <el-row class="swelrow">
        <el-col :span="6" class="left">
          <span>*</span> 计划发行金额：
        </el-col>
        <el-col :span="16">
          <el-input size="small" placeholder="请输入金额" v-model="adddia.plannedIssueAmount"></el-input>
        </el-col>
      </el-row>
      <el-row class="swelrow">
        <el-col :span="6" class="left">
          <span>*</span> 实际发行利率：
        </el-col>
        <el-col :span="16">
          <el-input size="small" placeholder="请输入利率" v-model="adddia.issueRate"></el-input>
        </el-col>
      </el-row>
      <el-row class="swelrow">
        <el-col :span="6" class="left">
          <span>*</span> 期限(月)：
        </el-col>
        <el-col :span="16">
          <el-input size="small" placeholder="请输入期限" v-model="adddia.term"></el-input>
        </el-col>
      </el-row>
      <!-- <el-row class="swelrow">
        <el-col :span="6" class="left">
          <span>*</span> 是否储架：
        </el-col>
        <el-col :span="16" :offset="1">
          <el-radio v-model="adddia.isShelf" label="1">是</el-radio>
          <el-radio v-model="adddia.isShelf" label="0">否</el-radio>
        </el-col>
      </el-row> -->
      <el-row class="swelrow">
        <el-col :span="6" class="left">
          <span>*</span> 专项计划存续期限(月)：
        </el-col>
        <el-col :span="16">
          <el-input size="small" placeholder="请输入期限" v-model="adddia.duration"></el-input>
        </el-col>
      </el-row>
      <el-row class="swelrow">
        <el-col :span="6" class="left">
          <span>*</span> 是否有循环购买：
        </el-col>
        <el-col :span="16" :offset="1">
          <el-radio v-model="adddia.isCyclePurchase" label="1">是</el-radio>
          <el-radio v-model="adddia.isCyclePurchase" label="0">否</el-radio>
        </el-col>
      </el-row>
      <el-row class="swelrow">
        <el-col :span="6" class="left">
          <span>*</span> 投资信息评级：
        </el-col>
        <el-col :span="16">
          <el-select placeholder="请选择" size="small" v-model="adddia.investmentRating">
            <el-option
              v-for="item in options"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            ></el-option>
          </el-select>
        </el-col>
      </el-row>
      <span slot="footer" class="dialog-footer">
        <el-button type="primary" @click="submitadd">提交</el-button>
      </span>
    </el-dialog>
    <!-- ----------------------------------------------------- -->
    <!-- -------------------编辑-------------------------- -->
    <el-dialog title="项目组成员" :visible.sync="dialogBj" width="708px" center :before-close="handleClose">
      <el-row class="swelrow">
        <el-col :span="6" class="left">
          <span>*</span> 实际发行金额：
        </el-col>
        <el-col :span="16">
          <el-input size="small" placeholder="请输入金额" v-model="data.actualIssueAmount"></el-input>
        </el-col>
      </el-row>
      <el-row class="swelrow">
        <el-col :span="6" class="left">
          <span>*</span> 计划发行金额：
        </el-col>
        <el-col :span="16">
          <el-input size="small" placeholder="请输入金额" v-model="data.plannedIssueAmount"></el-input>
        </el-col>
      </el-row>
      <el-row class="swelrow">
        <el-col :span="6" class="left">
          <span>*</span> 实际发行利率：
        </el-col>
        <el-col :span="16">
          <el-input size="small" placeholder="请输入利率" v-model="data.issueRate"></el-input>
        </el-col>
      </el-row>
      <el-row class="swelrow">
        <el-col :span="6" class="left">
          <span>*</span> 期限(月)：
        </el-col>
        <el-col :span="16">
          <el-input size="small" placeholder="请输入期限" v-model="data.term"></el-input>
        </el-col>
      </el-row>
      <!-- <el-row class="swelrow">
        <el-col :span="6" class="left">
          <span>*</span> 是否储架：
        </el-col>
        <el-col :span="16" :offset="1">
          <el-radio-group v-model="data.isShelf">
            <el-radio :label="1">是</el-radio>
            <el-radio :label="0">否</el-radio>
          </el-radio-group>
        </el-col>
      </el-row> -->
      <el-row class="swelrow">
        <el-col :span="6" class="left">
          <span>*</span> 专项计划存续期限(月)：
        </el-col>
        <el-col :span="16">
          <el-input size="small" placeholder="请输入期限" v-model="data.duration"></el-input>
        </el-col>
      </el-row>
      <el-row class="swelrow">
        <el-col :span="6" class="left">
          <span>*</span> 是否有循环购买：
        </el-col>
        <el-col :span="16" :offset="1">
          <el-radio-group v-model="data.isCyclePurchase">
            <el-radio :label="1">是</el-radio>
            <el-radio :label="0">否</el-radio>
          </el-radio-group>
        </el-col>
      </el-row>
      <el-row class="swelrow">
        <el-col :span="6" class="left">
          <span>*</span> 投资信息评级：
        </el-col>
        <el-col :span="16">
          <el-select placeholder="请选择" size="small" v-model="data.investmentRating">
            <el-option
              v-for="item in options"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            ></el-option>
          </el-select>
        </el-col>
      </el-row>
      <span slot="footer" class="dialog-footer">
        <el-button type="primary" @click="submitBj">提交</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
export default {
  name: "sendMessage",
  data() {
    return {
      dialogxinzeng: false,
      dialogBj: false,
      options: [
        {
          value: "评级",
          label: "评级"
        },
        {
          value: "优先",
          label: "优先"
        },
        {
          value: "劣后",
          label: "劣后"
        },
        {
          value: "次级",
          label: "次级"
        },
        {
          value: "平层",
          label: "平层"
        }
      ],
      value: "",
      data: {},
      adddia: {
        projectId: sessionStorage.getItem('swdypId'), // Integer 关联项目Id
        actualIssueAmount: "", // string 实际发行金额
        plannedIssueAmount: "", // string 计划发行金额
        issueRate: "", // string 实际发行利率
        term: "", // string 期限
        isShelf: '0', // string 是否储架 1: '', // 0 否
        duration: "", // string 存续期限
        isCyclePurchase: "", // string 是否有循环购买 1: '', // 0 否
        investmentRating: "" // string 投资信息评级
      },
      dataShow: false,
      pubMethod: ''
    };
  },
  created() {
    this.getProject();
    this.getdata();
  },
  methods: {
    getProject() {
      this.axios.get('AdminAPI/project/showProjectBaseInfo',{params: {id: sessionStorage.getItem('swdypId')}}).then(({data})=> {
        if (data.code == 200) {
          this.adddia.isShelf = data.data.pubMethod == '储架式'? '1': '0'
          // this.adddia.isShelf = data.data.pubMethod == '储架式'? '是': '否'
        }
      })
    },
    getdata() {
      this.axios
        .get("AdminAPI/project/showIssueInfo", {
          params: { projectId: sessionStorage.getItem('swdypId') }
        })
        .then(({ data }) => {
          if(!data.data) {
            this.dataShow = false;
          } else {
            this.data = data.data;
            this.dataShow = true;
          }
        });
    },
    submitBj() {
      let obj = this.data;
      for (let k in obj) {
        if (!(obj[k] !== '')) {
          this.$message({ message: "请填写完整", type: "warning" });
          return false;
        }
      }
      this.axios
        .post("AdminAPI/project/updateIssueInfo", obj)
        .then(({ data }) => {
          if (data.code == 200) {
            this.$message({ message: "修改成功", type: "success" });
            this.getdata();
            this.dialogBj = false;
          }
        });
    },
    submitadd() {
      let adddia = this.adddia;
      for (let k in adddia) {
        if (!(adddia[k] !== '')) {
          this.$message({ message: "请填写完整", type: "warning" });
          return false;
        }
      }
      this.axios
        .post("AdminAPI/project/addIssueInfo", adddia)
        .then(({ data }) => {
          if (data.code == 200) {
            this.$message({ message: "添加成功", type: "success" });
            this.getdata();
            this.dialogxinzeng = false;
          }
        });
    },
    handleClose(done) {
      this.getdata();
      done();
    }
  }
};
</script>

<style lang="scss">
#sendMessage {
  .messageSwdy {
    position: relative;
    .el-button {
      position: absolute;
      right: 110px;
      top: 50%;
      transform: translateY(-50%);
      font-size: 18px;
      font-weight: 400;
      cursor: pointer;
    }
  }
  .content {
    background: white;
    padding: 48px 76px;
    display: flex;
    justify-content: center;
    .box {
      min-width: 600px;
      > div {
        width: 100%;
        display: flex;
        line-height: 50px;
        span {
          color: #646464;
          font-size: 18px;
          &:nth-of-type(1) {
            width: 162px;
            text-align: right;
          }
          &:nth-of-type(2) {
            width: 200px;
            text-align: left;
            margin-right: 100px;
          }
          &:nth-of-type(3) {
            width: 162px;
            text-align: right;
          }
          &:nth-of-type(4) {
          }
        }
      }
    }
  }
  .swelrow {
    display: flex;
    align-items: center;
    margin-bottom: 16px;
    .left {
      text-align: right;
      span {
        font-size: 20px;
        color: red;
        vertical-align: middle;
      }
    }
    .el-input,
    .el-select {
      width: 100%;
    }
  }
}
</style>
